<template>
  <div>
    <van-nav-bar fixed title="我的团队" class="color-white bg-primary" left-arrow @click-left="$utils.back($route.path);" />
    <div class="has-top ">
      <!-- 搜索栏 -->
      <div class="flex-v-c ">
        <top-search
          class="flex-1 search-box"
          type="primary"
          :val="val"
          :area-show="areaShow"
          placeholder="请输入会员名称"
          :input-style="inputStyle"
          @search="search"
        />
        <svg-icon icon-class="filter" class="fs-40 flex-s-0 color-black mr-24" @goPage="openPop" />
      </div>
      <!-- tab栏 -->
      <div class="tab-bar zIndexBottom hb pos-r">
        <div
          v-for="(item, index) in tabItems"
          :key="index"
          class="tab-item"
          :class="activeTabIndex == index ? 'activeBorder' : ''"
          @click="clickTab(index)"
        >
          <span class="teb-item-text">{{ item.name }}</span>
          <i class="teb-item-border" />
        </div>
      </div>

      <van-swipe ref="swiper" class="swiper-box" :show-indicators="false" @change="onChange">
        <van-swipe-item v-for="(item, index) in tabItems" :key="index">
          <list class="list" :i="index" :params="oldRequestData" :fresh="freshData" @changAmout="changAmout" @goDetail="goDetail" />
        </van-swipe-item>
      </van-swipe>
    </div>

    <!-- 右侧筛选弹窗 -->
    <van-popup v-model="rightPopupShow" position="right" class="right-popup">
      <div class="pop-content">
        <van-nav-bar fixed title="筛选" left-arrow @click-left="rightPopupShow=false" />
        <div class="has-top">
          <p class="gray-line" />
          <!-- <p class="fs-28 pl-24 mt-40 fw-b">会员名称</p>
          <div class="flex-v-c hb mb-28">
            <input v-model="requestData.userName" class="flex-1 fs-28 pt-34 pb-24 plr-24" placeholder="请输入会员名称">

          </div> -->
          <p class="fs-28 pl-24 mt-40 fw-b">下单时间</p>
          <div class="flex-v-c hb mb-28">
            <span class="flex-1 popup-input pt-34 pb-24 " :class="requestData.startTime?'':'color-gray-light'" @click="openStartDateSelect"> {{ requestData.startTime||'请选择开始时间' }}</span>
            <span class="fs-28  pt-34 pb-24 ">至</span>
            <span class="flex-1 popup-input pt-34 pb-24 " :class="requestData.endTime?'':'color-gray-light'" @click="openEndDateSelect"> {{ requestData.endTime||'请选择结束时间' }}</span>
          </div>
          <p class="gray-line" />
        </div>
        <div class="bottom-box flex">
          <div class="flex-1 tac fs-28 ptb-28" @click="resetFilte">重置</div>
          <div class="flex-1 color-white bg-primary tac fs-28 ptb-28" @click="confirm">确认</div>
        </div>
      </div>
    </van-popup>

    <!-- 时间选择 -->
    <van-popup v-model="startDateSelect" position="bottom">
      <van-datetime-picker
        v-model="startCurrentDate"
        item-height="45"
        visible-item-count="4"
        type="date"
        title="请选择开始时间"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="onStartConfirm"
      />
    </van-popup>
    <van-popup v-model="endDateSelect" position="bottom">
      <van-datetime-picker
        v-model="endCurrentDate"
        item-height="45"
        visible-item-count="4"
        type="date"
        title="请选择结束时间"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="onEndConfirm"
      />
    </van-popup>

    <!-- 详情弹窗 -->
    <van-popup v-model="detailShow" position="bottom" class="full-width full-height detail-page">
      <!-- 详情 -->
      <detail :product-id="requestData.productId" :user-id="detailData.UserId" :name="detailData.Name" @closeDetail="detailShow=false" />
    </van-popup>
  </div>
</template>

<script>
import TopSearch from 'components/Search'
import list from 'components/orderCount/teamList'
import detail from 'components/orderCount/detail'
export default {
  name: 'MyTeam',
  components: { list, TopSearch, detail },
  // props: {
  //   productId: { // 商品id
  //     type: Number,
  //     required: true,
  //     default: 0
  //   }
  // },
  data() {
    return {
      // 搜索栏配置及数据
      areaShow: false,
      val: '',
      inputStyle: 'inputStyle-2',

      // 右侧弹窗
      rightPopupShow: false,

      // 时间相关
      minDate: new Date(1920, 0, 1),
      maxDate: new Date(2120, 11, 1),
      startDateSelect: false,
      startCurrentDate: new Date(),
      endDateSelect: false,
      endCurrentDate: new Date(),
      oldRequestData: {},

      // 请求参数
      requestData: {

      },
      // 刷新接口
      freshData: 0,

      // tab
      activeTabIndex: 0,
      tabItems: [{ name: '全部(0)' }, { name: '已下单(0)' }, { name: '未下单(0)' }],

      // 详情弹窗数据
      detailShow: false,
      detailData: {}
    }
  },
  computed: {
  },
  // watch: {
  //   productId(newId, oldId) {
  //     this.GetPurchaseProductDetailPage(newId)
  //   }
  // },
  created() {
    console.log(this.$route.params.productId)
    this.requestData.productId = Number(this.$route.params.productId)
    this.oldRequestData.productId = Number(this.$route.params.productId)
  },

  methods: {
    search(val) {
      console.log(val)
      if (this.oldRequestData.userName == val) {
        console.log('搜索名称不变')
        return false
      }
      this.oldRequestData.userName = val
      this.freshData++
    },
    goDetail(data) {
      console.log(data)
      this.detailData = data
      this.detailShow = true
    },
    changAmout(i, num) {
      const that = this
      console.log(i, num)
      switch (i) {
        case 0:
          that.tabItems[i].name = '全部(' + num + ')'
          break
        case 1:
          that.tabItems[i].name = '已下单(' + num + ')'
          break
        case 2:
          that.tabItems[i].name = '未下单(' + num + ')'
          break
        default:
          break
      }
    },
    onChange(index) {
      console.log(index)
      this.activeTabIndex = index
    },
    clickTab(index) {
      console.log(index)
      this.activeTabIndex = index
      this.$refs.swiper.swipeTo(index)
    },
    openPop() {
      this.requestData = JSON.parse(JSON.stringify(this.oldRequestData))
      this.$forceUpdate()
      this.rightPopupShow = true
    },
    openStartDateSelect() {
      if (this.requestData.startTime) {
        this.startCurrentDate = new Date(this.requestData.startTime)
      } else {
        this.startCurrentDate = new Date()
      }
      this.startDateSelect = true
    },
    openEndDateSelect() {
      if (this.requestData.endTime) {
        this.endCurrentDate = new Date(this.requestData.endTime)
      } else {
        this.endCurrentDate = new Date()
      }
      this.endDateSelect = true
    },
    onStartConfirm(val) {
      console.log(val)
      if (this.requestData.endTime && this.endCurrentDate < val) {
        this.$toast('开始时间不能晚于结束时间')
        return false
      }
      this.requestData.startTime = this.$utils.dateFomat('yyyy-mm-dd', val)
      console.log(this.requestData.startTime)
      this.startDateSelect = false
      this.$forceUpdate()
    },
    onEndConfirm(val) {
      console.log(val)
      if (this.requestData.startTime && this.startCurrentDate > val) {
        this.$toast('结束时间不能早于开始时间')
        return false
      }
      this.requestData.endTime = this.$utils.dateFomat('yyyy-mm-dd', val)
      console.log(this.requestData.endTime)
      this.endDateSelect = false
      this.$forceUpdate()
    },
    resetFilte() {
      this.requestData.endTime = ''
      this.requestData.startTime = ''
      this.startCurrentDate = new Date()
      this.endCurrentDate = new Date()
    },
    confirm() {
      // if (!this.requestData.startTime) {
      //   this.$toast('请选择开始时间')
      //   return false
      // }
      // if (!this.requestData.endTime) {
      //   this.$toast('请选择结束时间')
      //   return false
      // }
      if (new Date(this.requestData.endTime) < new Date(this.requestData.startTime)) {
        this.$toast('结束时间不能早于开始时间')
        return false
      }
      this.rightPopupShow = false
      console.log(this.requestData)
      console.log(this.oldRequestData)
      if (this.oldRequestData.startTime == this.requestData.startTime && this.oldRequestData.endTime == this.requestData.endTime) {
        console.log('筛选条件没改变')
        return false
      }
      this.oldRequestData = JSON.parse(JSON.stringify(this.requestData))
      this.oldRequestData.userName = this.val
      this.freshData++
    }
  }
}
</script>
<style lang="scss" scoped>
.color-white{
  /deep/.van-nav-bar__title,/deep/.van-icon{
    color:$colorF;
  }
}
.right-popup{
  width: 80vw;
  height: 100vh;
  .pop-content{
    position: relative;
    height: 100%;
    width: 100%;
    .gray-line{
      height: 12px;
      background: #F6F6F6;
    }
    .popup-input{
      text-align: center;
      font-size: 28px;
    }
    .bottom-box{
      position: absolute;
      bottom: 0;
      width: 100%;
    }
  }
}
.tab-bar {
  display: flex;

  flex-direction: row;
  // background: $colorF;
  padding: 10px 0 0;
  .tab-item {
    display: flex;
    flex: 1;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    .teb-item-text {
      display: flex;
      font-size: 30px;
      font-weight: bold;
      margin-bottom: 10px;
    }
    .teb-item-border {
      display: flex;
      width: 100%;
      height: 6px;
      border-radius: 3px;
      background: rgba($color: #000000, $alpha: 0);
    }
  }
  .activeBorder {
    .teb-item-text {
      @include color-primary;
    }
    .teb-item-border {
      @include bg-primary();
    }
  }
}
// .swiper-box{
//   height: calc(100vh - 180px);
// }
.list{
  height: calc(100vh - 180px);
}
.search-box{
  background: transparent;
  /deep/.inputStyle-2{
    background: $colorF;
  }
}
.detail-page{
  background: $colorF5;
}
</style>
